<template>
  <el-row class="page">
    <el-row class="content">
      <!-- <img src="@/assets/images/logo.png" class="logo-img" /> -->
      <div class="login-title">
        <span style="font-size:40px">国研计量监管区块链平台</span>
      </div>
      <el-col class="col">
        <div
          style="border-radius:50%;background:rgb(255,255,255);width:120px;height:100px;position:relative;right:0px;text-align:center;left:0px;margin:auto;bottom:70px;z-index:999">
          <img src="~@/assets/imageSet/logo.png" style="width:80px;height: ;margin-top:20px;border:1px dashed black" alt="">
        </div>
        <el-form ref="loginForm" :model="loginForm" :rules="rules" style="margin-top:-80px;text-align:center">
          <div style="text-align:left;margin-top:40px;margin-bottom:10px">
            帐号：
          </div>
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" style="width:24em" placeholder="请输入帐号" />
          </el-form-item>
          <div style="text-align:left;margin-top:20px;margin-bottom:10px"> 密码：</div>
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" type="password" style="width:24em" placeholder="请输入密码" />
          </el-form-item>
          <!-- <el-checkbox v-model="checked">记住密码</el-checkbox>
          <span class="forget-pwd" @click.stop="forgetPwd">忘记密码</span>-->
          <div style="position:relative;margin-top:40px">
            <el-button type="primary" style="position:absolute;left:0px" size="medium" @click="submitForm('loginForm')">
              登录
            </el-button>
            <el-button type="plain" style="position:absolute;right:0px" size="medium" native-type="reset">
              重置
            </el-button>
          </div>
        </el-form>
      </el-col>
      <el-col class="footer" />
    </el-row>
  </el-row>
</template>

<script>
import { mapActions } from 'vuex'
import { login } from '@/api/login.js'
export default {
  name: 'Login',
  data() {
    return {
      flag: 'this指向正确',
      timer: '',
      loginForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }
        ]
      },
      checked: false
    }
  },
  created() {
    const that = this
    document.onkeydown = function(e) {
      e = window.event || e
      if (that.$route.path == '/login' && (e.code == 'Enter' || e.code == 'enter')) {
        // 验证在登录界面和按得键是回车键enter
        that.submitForm('loginForm') // 登录函数
      }
    }
  },
  mounted() {
    // 页面加载调用获取cookie值
    this.getCookie()
  },

  methods: {
    ...mapActions('forgetPwd', ['setIncrement']),
    forgetPwd() {
      // 忘记密码初始化操作步骤(非子组件路由监听问题)
      this.setIncrement('/secretreset/obtainauth')
      this.$router.push({ path: '/secretreset' })
    },
    async submitForm(formName) {
      const self = this
      // 判断复选框是否被勾选 勾选则调用配置cookie方法
      if (self.checked == true) {
        // 传入账号名，密码，和保存天数3个参数
        self.setCookie(
          self.loginForm.username,
          self.loginForm.password,
          self.checked,
          7
        )
      } else {
        // 清空Cookie
        self.clearCookie()
      }
      // 验证登录
      this.$refs[formName].validate(valid => {
        if (valid) {
          login(this.loginForm.username, this.loginForm.password).then(res => {
            if (res.code === 200 || res.code === 201) {
              self.$router.push({ path: '/homepage' }) // 登录成功之后重定向到首页
            }
          })

          // self.$router.push({ path: "/homepage" }); //登录成功之后重定向到首页
          // this.$store.dispatch("Login", this.loginForm).then(() => {
          // });
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 设置cookie
    setCookie(c_name, c_pwd, c_checked, exdays) {
      var exdate = new Date() // 获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays) // 保存的天数
      // 字符串拼接cookie
      window.document.cookie =
        'userName' + '=' + c_name + ';path=/;expires=' + exdate.toUTCString()
      window.document.cookie =
        'userPwd' + '=' + c_pwd + ';path=/;expires=' + exdate.toUTCString()
      window.document.cookie =
        'checkedD' +
        '=' +
        c_checked +
        ';path=/;expires=' +
        exdate.toUTCString()
    },
    // 读取cookie
    getCookie: function() {
      console.log(window.document.cookie)
      if (document.cookie.length > 0) {
        var arr = document.cookie.split('; ') // 这里显示的格式需要切割一下自己可输出看下
        for (var i = 0; i < arr.length; i++) {
          var arr2 = arr[i].split('=') // 再次切割
          // 判断查找相对应的值
          if (arr2[0] == 'userName') {
            this.loginForm.username = arr2[1] // 保存到保存数据的地方
          } else if (arr2[0] == 'userPwd') {
            this.loginForm.password = arr2[1]
          } else if (arr2[0] == 'checkedD') {
            this.checked = eval(arr2[1])
          }
        }
      }
    },
    // 清除cookie
    clearCookie: function() {
      this.setCookie('', '', false, -1) // 修改2值都为空，天数为负1天就好了
    }
  }
}
</script>
<style scoped>
.el-row.page {
  background-image: url("~@/assets/imageSet/logbg.png");
  background-color: bisque;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: block;
  width: 100%;
  position: fixed;
  height: 100vh;
}
.el-row.content {
  height: 90vh;
  width: 100%;
  position: fixed;
  display: block;
}
.logo-img {
  float: left !important;
  padding: 16px;
}
.login-title {
  color: #fff;
  font-weight: normal;
  letter-spacing: 2px;
  font-size: 30px;
  text-align: center;
  margin-top: 100px;
}

.title-name {
  margin: 25px auto;
  font-family: "义启简圆体";
  color: rgb(238, 78, 57);
}
y .loginTitle p {
  margin-top: 5px;
}

.el-col.col {
  background-color: rgb(255,255,255);
  padding: 20px 80px;
  border-radius: 20px;
  width: 500px;
  max-width: 50%;
  max-height: 60%;
  height: 350px;
  margin: auto;
  position: absolute;
  /* left: 300px; */
  right: 200px;
  bottom: 100px;
}

.title {
  font-size: 22px;
  color: #1809ff;
}

.el-button {
  width: 35%;
  /* margin-top: 30px; */
  /* background-color: #1890ff; */
}

.forget-pwd {
  color: #1890ff;
  cursor: pointer;
  float: right;
  font-size: 14px;
  text-decoration: none;
}
.forget-pwd:hover {
  text-decoration: underline;
}
.footer {
  position: absolute;
  bottom: -8vh;
  text-align: center;
  color: white;
}
.footer a {
  color: white;
}
/* .col /deep/ .el-input {
  margin-top: 15px;
}
.col /deep/ .el-input__inner {
  padding-left: 35px;
} */
.iconfont {
  position: absolute;
  left: 10px;
  top: 15px;
  z-index: 1;
  font-size: 20px;
  color: #bfbfbf;
}
.el-form-item__error {
  left: 100px !important;
}
</style>
